import cax from '/cax/index'
import testData from "../utils/testPersonData.js"

let gInPage = null; // this
let gInCaxWidth = null; // canvas width 
let gInCaxHeight = null; // canvas height
let gInCaxId = null; // canvas id
let gInPixelRatio = null; // pixel ratio
let gInPixelRatioForTouch = null; // 触摸时位置偏移  ios不需要*这个值
let gInIsIphone = false; // 是不是ios
let gStage = null; // stage
let gBodyImageWidth = 0;
let gBodyImageHeight = 0;

let gBaseImageUrl = "https://morefun-active-1.oss-cn-shanghai.aliyuncs.com/2022_vansdress_jd"


/**
 * test item
 */
let tempImage = null;

/**
 *  personGroupNode
 */
let gPersonNodeGroup = null;

/**
 *  personBodyData
 */
let gPersonBodyData = testData;

let gPersonBodyLay = [];





function basePartLayGroup(inPartId, inPartDes, inDefaultImage, inIsSpirit) {
        this.mPartId = inPartId;
        this.mPartDes = inPartDes;
        this.mDefaultImage = inDefaultImage;
        this.mIsSpirit = inIsSpirit;
        this.mGroupNode = null;
        this.mPartImageNode = null;

        this.addGroupNode();
        this.changePartImage();
}

/**
 * 新增markup元素结束环节执行回调
 */
basePartLayGroup.prototype.addGroupNode = function () {
        console.log("basePartLayGroup.addGroupNode")
        console.log(this.mGroupNode)

        this.mGroupNode = new cax.Group();
        gPersonNodeGroup.add(this.mGroupNode);
}

/**
 * 替换对应部分的图片
 */
basePartLayGroup.prototype.changePartImage = function () {
        console.log("basePartLayGroup.changePartImage 0")

        if(this.mIsSpirit) {
                this.changePartSpirit();
                return;
        }

        if (this.mGroupNode && this.mPartImageNode) {
                this.mGroupNode.remove(this.mPartImageNode);
        }
        this.mPartImageNode = null;
        if(!this.mDefaultImage || this.mDefaultImage == "")
                return;

        this.mPartImageNode = new cax.Bitmap(
                gBaseImageUrl + this.mDefaultImage,
                (e) => {
                        // console.log("load  image  ok")
                        // console.log(e)
                        // gStage.update();
                }
        );


        // this.mPartImageNode.x = 0;
        // this.mPartImageNode.y = 0;
        this.mPartImageNode.rect = [0, 0, 375, 700];
        this.mPartImageNode.width = 375;
        this.mPartImageNode.height = 700;
        this.mPartImageNode.x = 0;
        this.mPartImageNode.y = 0;
        this.mPartImageNode.originX = 375 / 2;
        this.mPartImageNode.originY = 700 / 2;

        this.mPartImageNode.scaleX = (gBodyImageWidth) / 375;
        this.mPartImageNode.scaleY = (gBodyImageHeight) / 700;
        if (!gInIsIphone)
                this.mPartImageNode.scaleY *= -1;

        this.mGroupNode.add(this.mPartImageNode);
}

/**
 * 替换对应部分的spirit
 */
 basePartLayGroup.prototype.changePartSpirit = function () {
        console.log("basePartLayGroup.changePartSpirit 0")

        if (this.mGroupNode && this.mPartImageNode) {
                this.mGroupNode.remove(this.mPartImageNode);
        }
        this.mPartImageNode = null;
        if(!this.mDefaultImage || this.mDefaultImage == "")
                return;

        this.mPartImageNode = new cax.Bitmap(
                gBaseImageUrl + this.mDefaultImage,
                (e) => {
                        // console.log("load  image  ok")
                        // console.log(e)
                        // gStage.update();
                }
        );

        let temp = {
                framerate: 8,
                imgs: [gBaseImageUrl+this.mDefaultImage],
                // imgs: ['/static/anima-line-small.png'],

                frames: [
                        [0, 0, 480, 480],
                        [480 * 1, 0, 480, 480],
                        [0, 480 * 1, 480, 480],
                        [480 * 1, 480 * 1, 480, 480],
                        [0, 480 * 2, 480, 480]
                ],
                animations: {
                        win: {
                                frames: [3,3,3,3,2,2,3,3,2,2,3,3,3,3 ]
                        }
                },
                playOnce: false,
                currentAnimation: "win",
                animationEnd: function () {
                        // console.log("======animationEnd=======")
                }
        }

        this.mPartImageNode = new cax.Sprite(temp);

        this.mPartImageNode.rect = [0, 0, 480, 480];
        this.mPartImageNode.width = 480;
        this.mPartImageNode.height = 480;
        this.mPartImageNode.x = 0;
        this.mPartImageNode.y = 0;
        this.mPartImageNode.originX = 480 / 2;
        this.mPartImageNode.originY = 480 / 2;

        this.mPartImageNode.scaleX = (gBodyImageWidth) / 480;
        this.mPartImageNode.scaleY = (gBodyImageHeight) / 480;
        if (!gInIsIphone)
                this.mPartImageNode.scaleY *= -1;

        this.mGroupNode.add(this.mPartImageNode);
}

function findBodyPartLayById(inId) {
        return gPersonBodyLay.find(e => {
                return e.mPartId == inId
        })
}


/**
 * 初始化stage
 * @param {*} inPage page实例
 * @param {*} inCaxWidth cax宽度
 * @param {*} inCaxHeight cax高度
 * @param {*} inCaxId cax的组件id
 * @param {*} inPixelRatio pr
 */
function initStage(inPage, inCaxWidth, inCaxHeight, inCaxId, inPixelRatio, inIsIphone) {

        gInPage = inPage;
        gInCaxWidth = inCaxWidth;
        gInCaxHeight = inCaxHeight;
        gInCaxId = inCaxId;
        gInPixelRatioForTouch = inPixelRatio;
        gInPixelRatio = 1;
        gInIsIphone = inIsIphone;

        gBodyImageWidth = inCaxWidth;
        gBodyImageHeight = inCaxHeight;

        if (gInIsIphone)
                gInPixelRatioForTouch = 1;

        jd.createSelectorQuery()
                .select('#' + inCaxId)
                .fields({
                        node: true,
                        size: true,
                })
                .exec(initStageStepTwo)
}

function initStageStepTwo(res) {
        console.log("initStageStepTwo   --- 0")

        let canvas = res[0].node
        console.log("initStageStepTwo   --- 1")
        console.log(canvas)

        let ctx = canvas.getContext('2d')
        console.log("canvas   --- 1")

        gInPage.ctx = ctx;
        gInPage.canvas1 = canvas;
        RemoveAllElement();

        gStage = null;
        gStage = new cax.Stage(gInCaxWidth, gInCaxHeight, gInCaxId, gInPage, "taobao");

        gPersonNodeGroup = new cax.Group();
        gPersonNodeGroup.x = gBodyImageWidth / 2;
        gPersonNodeGroup.y = gBodyImageHeight / 2;

        console.log(` ===== ${gPersonNodeGroup.x} === ${gPersonNodeGroup.y}`)

        gStage.add(gPersonNodeGroup);

        gPersonBodyData.bodyLays.forEach(e => {
                let temp = new basePartLayGroup(e.partId, e.partDes, e.partImage, e.isSpirit);
                gPersonBodyLay.push(temp);
        })

        // testSpirit();
        createSpirit();
        if (1)
                cax.tick(gStage.update.bind(gStage));


}

function moveBodyAni(tag) {
        // return;
        let tempToX = gBodyImageWidth / 2;
        let tempToY = gBodyImageHeight / 2;
        let tempScale = 1;

        if (tag == "top") {
                tempToX = gBodyImageWidth / 2;
                tempToY = gBodyImageHeight / 2 + 50;
                tempScale = 1.3;
        } else if (tag == "center") {
                tempToX = gBodyImageWidth / 2;
                tempToY = gBodyImageHeight / 2;
                tempScale = 1.0;
                // return;
        } else if (tag == "bottom") {
                tempToX = gBodyImageWidth / 2;
                tempToY = gBodyImageHeight / 2 - 50;
                tempScale = 1.3;
        }
        console.log(`moveBodyAni --0-- ${gPersonNodeGroup.x} --- ${gPersonNodeGroup.y} `)

        console.log(`moveBodyAni --1-- ${tempToX} --- ${tempToY} `)

        let easing = cax.To.easing.ease
        cax.To.get(gPersonNodeGroup)
                .to({
                        x: tempToX,
                        y: tempToY
                }, 200, easing)
                .scaleX(tempScale, 200, easing)
                .scaleY(tempScale, 200, easing)
                .start()
}

let testS = null;

// function testSpirit() {
//         let tempImg = new cax.Bitmap(
//                 'https://morefun-active-1.oss-cn-shanghai.aliyuncs.com/2022_vansdress_jd/sprite/anima-line-small.png',
//                 // '/static/anima-line-small.png',
//                 (e) => {
//                         console.log("load  image  ok")
//                         // console.log(e)
//                         gStage.update();
//                         createSpirit();
//                 }
//         );


//         tempImg.rect = [0, 0, 248, 247];
//         tempImg.width = 24.8;
//         tempImg.height = 24.7;
//         tempImg.x = 0;
//         tempImg.y = 0;

//         gStage.add(tempImg);
// }

function createSpirit() {
        let temp = {
                framerate: 8,
                imgs: ['https://morefun-active-1.oss-cn-shanghai.aliyuncs.com/2022_vansdress_jd/sprite/css_sprites.png'],
                // imgs: ['/static/anima-line-small.png'],

                frames: [
                        // x, y, width, height, originX, originY ,imageIndex
                        [0, 0, 79, 71],
                        [79 * 1, 0, 79, 71],
                        [79 * 2, 0, 79, 71]
                ],
                animations: {
                        // walk: {
                        //         frames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15,
                        //                 16, 17, 18, 19, 20, 21, 22,23,24,25,
                        //                 26, 27, 28, 29, 30, 31, 32,33,34,35]
                        // },
                        // happy: {
                        //         frames: [5, 6, 7, 8, 9]
                        // },
                        win: {
                                frames: [0, 1, 2]
                        }
                },
                x: 80,
                y: 180,
                playOnce: false,
                currentAnimation: "win",
                animationEnd: function () {
                        // console.log("======animationEnd=======")
                }
        }
        // temp.frames = [];
        // for(let i = 0 ; i < 38 ; i++) {
        //         temp.frames.push([248 * i , 0 ,248 , 247]) 
        // }

        testS = new cax.Sprite(temp);

        testS.x = 0;
        testS.y = 0;
        testS.rect = [0, 0, 79, 71];
        testS.width = 79;
        testS.height = 71;

        testS.scaleX = (71) / 79;
        testS.scaleY = (79) / 71;

        gStage.add(testS);
        gStage.update();
}



function startSpirit() {
        console.log("======startSpirit=======")
        testS.gotoAndPlay("walk")
        gStage.update();

}

function testAni(tag) {
        const easing = cax.To.easing.elasticInOut
        cax.To.get(tempImage)
                .to()
                .scaleY(1, 2000, cax.easing.elasticInOut)
                .wait(5000)
                .to()
                .scaleY(0, 2000, cax.easing.elasticInOut)
                .wait(5000)
                .to()
                .scaleY(1, 2000, cax.easing.elasticInOut)
                .begin(() => {
                        tempImage.scaleY = 1;
                        console.log("Task two has completed!")
                })
                .cycle()
                .start()
}

function changePartByExternalData(inData) {
        console.log("changePartByExternalData(inData) " , inData)
        let tempLayGroup = findBodyPartLayById(inData.partId);
        console.log("changePartByExternalData(inData)  === 0 ")
        if(!tempLayGroup) {
                console.log("changePartByExternalData(inData)  ==!!!== tempLayGroup ")
                return;
        }
        console.log(tempLayGroup.mDefaultImage)
        console.log("changePartByExternalData(inData)  ==== 1 ")
        tempLayGroup.mDefaultImage = inData.partImage;
        console.log(tempLayGroup.mDefaultImage)
        tempLayGroup.changePartImage();

}


//删除所有元素
function RemoveAllElement() {
        if (!gStage)
                return;

        while (gStage.children.length > 0) {
                gStage.remove(gStage.children[0]);
        }
};

function canvasStart(event) {};

function canvasMove(event) {}

function canvasEnd(event) {}


module.exports = {
        initStage: initStage,
        canvasStart: canvasStart,
        canvasMove: canvasMove,
        canvasEnd: canvasEnd,
        moveBodyAni: moveBodyAni,
        startSpirit: startSpirit,
        changePartByExternalData: changePartByExternalData
};